/* eslint-disable react/jsx-no-duplicate-props */
'use client'

import { yupResolver } from '@hookform/resolvers/yup'
import { LoginBtn } from '@/components/common/Buttons'
import TextField from '@/components/common/TextField'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { logInSchema } from '@/lib/parity'
import Image from "next/image";
import Imgs from '@/lib/imgs'
import styles from './form.module.scss';

interface IProps {
  isLoading: boolean;
  // onSubmit: () => void
}
// onSubmit

const errors = { message: 'Please provide a vaild email address' }

const LoginForm = ({ isLoading, }: IProps) => {
  const {
    handleSubmit,
    control,
    formState: { errors: formErrors },
    setFocus,
  } = useForm({
    resolver: yupResolver(logInSchema),
    defaultValues: { email: '', password: '' },
  })

  useEffect(() => {
    setFocus('email')
  }, [])

  return (
    // onSubmit={handleSubmit(onSubmit)}
    <form autoComplete="off">
      <TextField
        label="Email"
        placeholder="请输入您的账户邮箱"
        name="email"
        control={control}
        errors="Please provide a vaild email address"
      />

      <TextField
        label="Password"
        errors="Please provide a vaild email address"
        type="password"
        placeholder="请输入您的账户密码"
        name="password"
        control={control}
      />

      <div className={styles.}>
          <Image src={Imgs.checked} width="18" height="18" alt='checked' />
          <div className=''>
            I agree to the Terms of Service and Privacy Policy
            <span>《Terms of Service》</span>
            <span>《Privacy Policy》</span>
          </div>
      </div>
      <LoginBtn isLoading={isLoading}>登录</LoginBtn>

    </form>
  )
}

export default LoginForm
